<template>
	<div class="userfour">
		<p>
			<img src="../../../assets/img/img19.750c255a.png" />
			<span>精选推荐</span>
			<img src="../../../assets/img/img20.51bebaf2.png" />
		</p>
		<ul class="userfour_center">
			<li v-for="item in list_userfour" :key="item.id">
				<router-link to="/">
					<img :src="item.url" />
					<p>{{item.txt}}</p>
					<p>
						<span><span>￥{{item.price}}起</span></span>
						<span>{{item.time}}</span>
					</p>
					<p>{{item.txt_top}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
export default{
	name:'Userfour',
	props:['userfour'],
	data(){
		return{
			list_userfour:[]
		}
	},
	watch:{
		userfour(){
			this.list_userfour = this.userfour
		}
	}
}
</script>

<style>
.userfour{
	width: 100%;
	height: 49rem;
	margin-top: 0.5rem;
}
.userfour p{
	text-align: center;
}
.userfour p img{
	width: 0.7rem;
}
.userfour p:nth-child(1) span{
	font-size: 0.4rem;
	font-weight: bold;
}
.userfour_center ul{
	width: 100%;
	text-align: center;
}
.userfour ul li{
	width: 40%;
	height: 200px;
	margin-top: 0.5rem;
	margin-left: 0.7rem;
	float: left;
}
.userfour_center img{
	width: 4.5rem;
	height: 2.5rem;
	border-radius: 0.2rem;
}
.userfour_center li p:nth-child(even){
	float: left;
	margin-bottom: 0.2rem;
 } 
.userfour_center li p:nth-child(2){
	margin-top: 0.1rem;
	color: #000000;
	font-size: 0.3rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.userfour_center li p:nth-child(3){
	font-size: 0.3rem;
	color: gray;
	margin-top: 1rem;
}
.userfour_center li p:nth-child(3) span:first-child {
	float: left;
}
.userfour_center li p:nth-child(3) span:first-child span{
	margin-right: 1.2rem;
	font-weight: bold;
	color: orange;
}
.userfour_center li p:last-child{
	position: relative;
	margin-top: -3.7rem;
	color: white;
	text-indent: 0.2em;
	line-height: 0.4rem;
	background-color: rgba(0,0,0,0.6);
	border-radius: 0 0.3rem 0.3rem 0 ;
}
</style>
